<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>EasyUKey PIN设置</title>
		<script src="https://cdn.tailwindcss.com"></script>
		<script
			defer
			src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
		></script>
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
		/>
		<style>
			@keyframes pulse-ring {
				0% {
					transform: translate(-50%, -50%) scale(0.7);
					opacity: 1;
				}
				100% {
					transform: translate(-50%, -50%) scale(1.3);
					opacity: 0;
				}
			}
			.pulse-ring::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				height: 100%;
				border: 2px solid #3b82f6;
				border-radius: 50%;
				animation: pulse-ring 2s infinite;
			}
			[x-cloak] {
				display: none !important;
			}
			.pin-input {
				width: 3rem;
				height: 3rem;
				text-align: center;
				font-size: 1.5rem;
				font-weight: bold;
				border: 2px solid #e5e7eb;
				border-radius: 0.5rem;
				outline: none;
				transition: all 0.2s;
			}
			.pin-input:focus {
				border-color: #3b82f6;
				box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
			}
			.pin-input.filled {
				border-color: #10b981;
				background-color: #f0fdf4;
			}
		</style>
	</head>
	<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
		<div
			x-data="pinSetup()"
			x-init="init()"
			class="min-h-screen flex items-center justify-center p-4"
		>
			<div
				class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 relative overflow-hidden"
			>
				<!-- PIN设置视图 -->
				<div x-show="!completed" x-cloak>
					<!-- 背景装饰 -->
					<div
						class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-full -translate-y-16 translate-x-16 opacity-10"
					></div>

					<!-- 标题区域 -->
					<div class="text-center mb-8">
						<div class="relative inline-block mb-4">
							<div
								class="w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white text-3xl pulse-ring relative"
							>
								<i class="fas fa-key"></i>
							</div>
						</div>
						<h1 class="text-2xl font-bold text-gray-800 mb-2">设置 PIN 密码</h1>
						<p class="text-gray-600">请设置您的6位数字PIN密码</p>
					</div>

					<!-- PIN输入区域 -->
					<div class="mb-6 text-center">
						<input
							type="password"
							maxlength="6"
							inputmode="numeric"
							pattern="[0-9]*"
							placeholder="******"
							class="pin-input block mx-auto"
							x-model="pin"
							@input="onInput"
							autocomplete="one-time-code"
							style="
								letter-spacing: 0.5em;
								text-align: center;
								width: 12em;
								font-size: 2em;
							"
						/>
						<p class="text-sm text-gray-500 mt-2">
							可直接粘贴或连续输入6位数字
						</p>
					</div>

					<!-- 错误提示 -->
					<div
						x-show="errorMessage"
						x-transition
						class="mb-4 p-3 bg-red-100 border border-red-200 rounded-lg text-center"
					>
						<p class="text-red-700 text-sm">
							<i class="fas fa-exclamation-triangle mr-2"></i>
							<span x-text="errorMessage"></span>
						</p>
					</div>

					<!-- 确认按钮 -->
					<div class="mb-4">
						<button
							@click="submitPIN()"
							:disabled="!isComplete || loading"
							class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 disabled:from-gray-300 disabled:to-gray-400 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center justify-center transform hover:scale-105 disabled:transform-none"
						>
							<i class="fas fa-check mr-2"></i>
							设置PIN密码
						</button>
					</div>

					<!-- 提示信息 -->
					<div class="text-center text-sm text-gray-500">
						<p>PIN密码用于加密保护您的认证信息</p>
						<p>请牢记此密码，遗失后需要重新初始化</p>
					</div>
				</div>

				<!-- 结果视图 -->
				<div x-show="completed" x-cloak class="text-center">
					<div class="mb-6">
						<div
							class="w-20 h-20 rounded-full flex items-center justify-center text-white text-3xl mx-auto mb-4"
							:class="success ? 'bg-gradient-to-br from-green-500 to-emerald-600' : 'bg-gradient-to-br from-red-500 to-orange-600'"
						>
							<i class="fas" :class="success ? 'fa-check' : 'fa-times'"></i>
						</div>
						<h1
							class="text-2xl font-bold text-gray-800 mb-2"
							x-text="success ? 'PIN设置成功' : 'PIN设置失败'"
						></h1>
						<p class="text-lg text-gray-600" x-text="resultMessage"></p>
					</div>
					<div class="text-sm text-gray-500">
						<p>此窗口将在 3 秒后自动关闭</p>
					</div>
				</div>

				<!-- 全局加载状态 -->
				<div
					x-show="loading"
					x-transition
					class="absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center rounded-2xl"
				>
					<div class="text-center">
						<div
							class="w-12 h-12 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mx-auto mb-4"
						></div>
						<p class="text-gray-600">正在设置PIN...</p>
					</div>
				</div>
			</div>
		</div>

		<script>
			function pinSetup() {
				return {
					pin: "",
					loading: false,
					completed: false,
					success: false,
					resultMessage: "",
					errorMessage: "",

					get isComplete() {
						return this.pin.length === 6;
					},

					init() {
						// No specific initialization needed for the single pin input
					},

					onInput(e) {
						this.pin = e.target.value.replace(/\D/g, "").slice(0, 6);
						this.errorMessage = "";
					},

					async submitPIN() {
						if (!this.isComplete) {
							this.errorMessage = "请输入完整6位PIN";
							return;
						}
						this.loading = true;
						this.errorMessage = "";
						try {
							const response = await fetch("/pin-setup", {
								method: "POST",
								headers: { "Content-Type": "application/json" },
								body: JSON.stringify({ pin: this.pin }),
							});
							const result = await response.json();
							if (!response.ok)
								throw new Error(result.message || "设置PIN失败");
							this.showResult(result.message || "PIN设置成功", true);
						} catch (error) {
							this.showResult(error.message || "PIN设置失败，请重试", false);
						}
					},

					showResult(message, isSuccess) {
						this.loading = false;
						this.completed = true;
						this.success = isSuccess;
						this.resultMessage = message;
						setTimeout(() => window.close(), 3000);
					},
				};
			}
		</script>
	</body>
</html>
